<template>
    <div :id="id"></div>
</template>
<script>
import echartsOption from '@/option/echartsOption/smoothedLineOption/index';
import utils from '@/utils/throttleAndDebounce/index';

export default {
    name: 'smallChart',
    created() {
        this.option = echartsOption.setOption(this.axisData.xData, this.axisData.yData, this.axisName.xName, this.axisName.yName, this.title, this.yMinAndYMax[0], this.yMinAndYMax[1]);
    },
    data() {
        return {
            option: '',
            myEcharts: ''
        };
    },
    props: {
        id: { type: String, require: true },
        title: {
            type: String,
            default: () => {
                return '';
            }
        },
        yMinAndYMax: {
            type: Array,
            default: () => {
                return [210, 250];
            }
        },
        axisData: {
            type: Object,
            default: () => {
                return { xData: [], yData: [] };
            }
        },
        axisName: {
            type: Object,
            default: () => {
                return { xName: '', yName: '' };
            }
        }
    },
    methods: {
        //初始化图表设置
        initEcharts() {
            let dom = document.querySelector('#' + this.id);
            if (this.myEcharts != null && this.myEcharts !== '') {
                this.myEcharts.dispose();
            }
            if (dom) {
                this.myEcharts = this.$echarts.init(dom);
                this.myEcharts.setOption(this.option);
            }
        },
        //Dom元素大小发生改变之后修改图表的大小
        DomResize() {
            setTimeout(() => {
                this.initEcharts();
                // console.log(myEcharts);
                let dom = document.querySelector('#' + this.id);
                if (dom) {
                    //监听dom的大小变化
                    const resizeObserver = new ResizeObserver(utils.throttle(entries => {
                        this.myEcharts.resize();
                        console.log(entries);
                    }, 500));
                    resizeObserver.observe(dom);
                }

            });
        }
    },
    mounted() {
        setTimeout(this.DomResize, 10);
    },
    watch: {
        axisData: {
            handler(newVal) {//深度监听可以监听到复杂数据类型的变化
                // console.log(newVal, oldVal);
                if (newVal) {
                    this.option = echartsOption.setOption(this.axisData.xData, this.axisData.yData, this.axisName.xName, this.axisName.yName, this.title, this.yMinAndYMax[0], this.yMinAndYMax[1]);
                    this.initEcharts();
                }
            },
            deep: true
        }
    }

};
</script>
<style scoped>
div {
    width: 100%;
    height: 100%;
}
</style>
